<!--
 * @Description: 遮罩组件
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-10-12
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2023-11-07
-->
<script lang="ts" setup>
  const props = defineProps<{
    show: boolean
    width: string
    height: string
  }>()

  const emits = defineEmits<{
    (event: 'update:show', value: boolean): void
  }>()

  const hideShade = () => emits('update:show', false)
</script>

<template>
  <view class="shade" v-show="props.show" @click="hideShade()">
    <view class="shade-dialig" :style="{ width: width, height: height }" @click.stop>
      <view class="shade-dialog-content">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<style lang="less" scoped>
  .shade {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgb(0 0 0 / 60%);

    > .shade-dialig {
      position: absolute;
      inset: 0;
      margin: auto;
      background: #fff;
      border-radius: 12rpx;

      > .shade-dialog-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
